<style>
    #member-list-table .body .td .iconfont {
        color: #ccc;
        font-size: 12px;
        margin-right: 3px
    }
</style>
<div class="act-btns">
    <div class="button" onclick="document.getElementById('add-member').showModal()">
        <span class="iconfont icon-add-member"></span>
        <span>新增成员</span>
    </div>
    <div class="button" id="bat-create-users-btn">
        <span class="iconfont icon-password" style="color:#b7d332"></span>
        <span>批量创建登录名和密码</span>
    </div>
</div>
<div class="list-table has-btn" id="member-list-table">
    <div class="head">
        <div class="tr">
            <div class="th" style="width:50px">序号</div>
            <div class="th" style="width:100px">
                <span>姓名</span>
                <div class="filter-tag">
                    <span class="iconfont icon-filter-records-fill"></span>
                </div>
            </div>
            <div class="th" style="width:50px">性别</div>
            <div class="th" style="width:100px">出生日期</div>
            <div class="th" style="width:100px">父亲</div>
            <div class="th" style="width:100px">配偶</div>
            <div class="th" style="width:150px">现居住地</div>
            <div class="th" style="width:100px">电话</div>
            <div class="th" style="width:50px">排序</div>
            <div class="th" style="width:200px">备注</div>
            <div class="th" style="width:220px">操作</div>
        </div>
    </div>
    <div class="body">
        {{range $index,$item := .rows}}
        <div class="tr" data-id="{{$item.id}}">
            <div class="td" style="width:50px">{{add $index 1}}</div>
            <div class="td" style="width:100px">{{if ne $item.uid ""}}<span class="iconfont icon-xingming" {{if eq
                    $item.disabled "0" }} style="color:#97d4ff" {{end}}></span>{{end}}{{$item.name}}</div>
            <div class="td" style="width:50px">{{$item.sex}}</div>
            <div class="td" style="width:100px">{{$item.birth}}</div>
            <div class="td" style="width:100px" data-parent-id="{{$item.parent_id}}">{{$item.parent_name}}</div>
            <div class="td" style="width:100px">{{$item.spouse}}</div>
            <div class="td" style="width:150px">{{$item.address}}</div>
            <div class="td" style="width:100px">{{$item.phone}}</div>
            <div class="td" style="width:50px">{{$item.sort}}</div>
            <div class="td" style="width:200px">{{$item.remark}}</div>
            <div class="td btns" style="width:220px">
                <span onclick="editMember(event.target.parentNode.parentNode)">编辑</span>
                <span onclick="delMember(event.target.parentNode.parentNode)" style="margin-left:7px">删除</span>
                {{if ne $item.uid ""}}
                <span style="margin-left:7px" class="reset-pswd-btn" data-id="{{$item.uid}}">重置密码</span>
                <span style="margin-left:7px" class="disable-login" data-id="{{$item.uid}}">{{if eq $item.disabled
                    "1"}}启用{{else}}禁止{{end}}登录</span>
                {{end}}
            </div>
        </div>
        {{end}}
    </div>
    <div class="foot">
        <div class="paginate">
            <ul>
                {{if eq .paginator.Curr 1}}
                <li><span>上一页</span></li>
                {{else}}
                <li><a href="/admin/#members/list?page={{.paginator.Prev}}">上一页</a></li>
                {{end}}
                {{range .paginator.Pages}}
                {{if eq $.paginator.Curr .}}
                <li><span>{{.}}</span></li>
                {{else}}
                <li><a href="/admin/#members/list?page={{.}}">{{.}}</a></li>
                {{end}}
                {{end}}
                {{if gt .paginator.Next .paginator.Total}}
                <li><span>下一页</span></li>
                {{else}}
                <li><a href="/admin/#members/list?page={{.paginator.Next}}">下一页</a></li>
                {{end}}
            </ul>
        </div>
    </div>
</div>

<div class="modal" id="add-member" style="display:none">
    <form class="modal-row" action="/admin/members/add" method="post" style="width:1075px;height:600px;">
        <h2>新增成员</h2>
        <div class="body">
            <div class="w300">
                {{searchBox "father" "父亲" "/admin/members/query" "" "" true}}
            </div>
            <div class="list-table" style="height:450px">
                <div class="head">
                    <div class="tr">
                        <div class="th" style="width:40px">序号</div>
                        <div class="th" required="true" style="width:100px"><label>姓名</label></div>
                        <div class="th" style="width:80px">性别</div>
                        <div class="th" style="width:120px">出生日期</div>
                        <div class="th" style="width:100px">配偶</div>
                        <div class="th" style="width:150px">地址</div>
                        <div class="th" style="width:100px">电话</div>
                        <div class="th" style="width:200px">备注</div>
                        <div class="th" style="width:60px"></div>
                    </div>
                </div>
                <div class="body no-foot">
                    <div class="tr">
                        <div class="td" style="width:40px">1</div>
                        <div class="td" style="width:100px">
                            <input type="text" onkeydown="onAddMemberInputKeyDown(event)" name="name[0]" required="true"
                                autocomplete="off">
                        </div>
                        <div class="td" style="width:80px">
                            <label>
                                <input type="radio" name="sex[0]" value="1" checked>男
                            </label>
                            <label>
                                <input type="radio" name="sex[0]" value="2">女
                            </label>
                        </div>
                        <div class="td" style="width:120px">
                            <input name="birth[0]" type="date" onkeydown="onAddMemberInputKeyDown(event)" />
                        </div>
                        <div class="td" style="width:100px">
                            <input type="text" name="spouse[0]" onkeydown="onAddMemberInputKeyDown(event)">
                        </div>
                        <div class="td" style="width:150px">
                            <input type="text" name="address[0]" onkeydown="onAddMemberInputKeyDown(event)">
                        </div>
                        <div class="td" style="width:100px">
                            <input type="text" name="phone[0]" onkeydown="onAddMemberInputKeyDown(event)">
                        </div>
                        <div class="td" style="width:200px">
                            <textarea name="remark[0]"></textarea>
                        </div>
                        <div class="td btns" style="width:60px">
                            <span class="iconfont icon-jia"></span>
                            <span class="iconfont icon-jian ml10" style="color:chocolate"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <button type="submit" onclick="addMember(event)">保存</button>
        </div>
    </form>
    <span class="iconfont icon-close"></span>
</div>

<div class="modal" id="edit-member">
    <form class="modal-row" action="/admin/members/edit" method="post" style="width:455px;height:600px;">
        <h2>编辑成员资料</h2>
        <div class="body">
            <input type="hidden" name="id" value="">
            {{input "text" "name" "姓名" `{"required":true}`}}
            {{input "radio" "sex" "性别" `{"items":[{"男":"1","女":"2"}]}`}}
            {{input "date" "birth" "出生日期"}}
            {{searchBox "parent_id" "父亲" "/admin/members/query" "" "" true}}
            {{input "text" "spouse" "配偶"}}
            {{input "text" "address" "现居住地"}}
            {{input "text" "phone" "电话"}}
            {{input "number" "sort" "排序"}}
            {{input "textarea" "remark" "备注"}}
        </div>
        <div class="foot">
            <button type="submit" onclick="submitEditMember(event)">保存</button>
        </div>
    </form>
    <span class="iconfont icon-close"></span>
</div>
<script id="members-list">
    regInitFun('members-list', function () {
        var table = document.getElementById('member-list-table');
        var width = 0;
        table.querySelectorAll('.head .tr .th').forEach(th => {
            var offsetWidth = th.offsetWidth;
            width += offsetWidth;
        })
        width += 15;
        table.querySelector('.head').style.minWidth = width + 'px';
        table.querySelector('.body').style.minWidth = width + 'px';

        var search = function(keyword){
            var hash = window.location.hash;
            hash = hash.replace(/\?+name=(.*[^&])*$/g,'')
            hash = hash+'?name='+keyword;
            window.location.hash = hash;
        }
        var getQuery = function(name){
            var query = window.location.hash.split('?',2);
            if(query.length==1){
                return '';
            }
            query = query[1]
            var arrs = query.split('&');
            for (const kv of arrs) {
                var arr = kv.split('=');
                if(arr[0] == name){
                    return decodeURIComponent(arr[1]);
                }
            }
            return '';
        }
        document.querySelector('#member-list-table .head .filter-tag').addEventListener('mouseenter', ev => {
            if (!ev.target.filterBox) {
                var filterBox = document.createElement('div');
                filterBox.className = 'g-filter-box';
                var input = document.createElement('input');
                input.type = 'text';
                input.onkeydown = ev4=>{
                    if(ev4.key=='Enter'){
                        search(ev4.target.value)
                    }
                }
                input.value = getQuery('name');
                var btn = document.createElement('button');
                btn.innerText = '筛选'
                btn.addEventListener('click',ev3=>{
                    search(input.value)
                })
                filterBox.appendChild(input);
                filterBox.appendChild(btn);
                ev.target.filterBox = filterBox;
                document.body.appendChild(filterBox);
                filterBox.addEventListener('mouseenter', ev1 => {
                    ev.target.canHide = false;
                })
                filterBox.addEventListener('mouseleave', ev1 => {
                    ev.target.canHide = true;
                    if (ev1.target.timer) {
                        clearTimeout(ev1.target.timer)
                    }
                    ev1.target.timer = setTimeout(() => {
                        ev.target.classList.remove('hover');
                        ev1.target.hide();
                    }, 100);
                })
            }
            ev.target.filterBox.style.display = 'block';
            var pos = ev.target.getBoundingClientRect();
            ev.target.classList.add('hover');
            var x = pos.x - ev.target.filterBox.offsetWidth / 2
            ev.target.filterBox.style.left = x + 'px';
            ev.target.filterBox.style.top = pos.y + ev.target.offsetHeight - 4 + 'px'
        })
        document.querySelector('#member-list-table .head .filter-tag').addEventListener('mouseleave', ev => {
            if (ev.target.timer) {
                clearTimeout(ev.target.timer);
            }
            ev.target.canHide = true;
            if (ev.target.filterBox) {
                ev.target.timer = setTimeout(() => {
                    if (ev.target.canHide) {
                        ev.target.classList.remove('hover');
                        ev.target.filterBox.hide();
                    }
                }, 100);
            }
        });

        document.getElementById('bat-create-users-btn').addEventListener('click', ev => {
            if (!confirm('用成员的姓名创建登录用户名和密码（默认：123456），已创建的不会重复创建')) {
                return;
            }
            ajax('/admin/members/createUsers', 'post').then(() => {
                alert("操作成功")
                route();
            }).catch(e => {
                alert('操作失败' + e);
            })
        })

        document.querySelector('.list-table .body').addEventListener('click', ev => {
            switch (true) {
                case ev.target.matches('.reset-pswd-btn'):
                    if (!confirm('确认重置该成员登录密码')) {
                        return;
                    }
                    var id = ev.target.dataset.id;
                    ajax('/admin/members/resetPswd', 'post', { id }).then(() => {
                        alert("重置密码成功")
                    }).catch(e => {
                        alert('操作失败' + e);
                    })
                    break;
                case ev.target.matches('.disable-login'):
                    var status = 0;
                    var str = '启用'
                    if (ev.target.innerText.indexOf('禁止') > -1) {
                        status = 1;
                        str = '禁止'
                    }
                    if (!confirm('确认' + str + '该成员登录')) {
                        return;
                    }
                    var id = ev.target.dataset.id;
                    ajax('/admin/members/disableLogin', 'post', { id, status }).then(() => {
                        alert("操作成功")
                        route();
                    }).catch(e => {
                        alert('操作失败' + e);
                    })
                    break;
            }
        })
    })
</script>